<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>修改表单</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../component/pear/css/pear.css">
    <script src="../../js/myUtils.js"></script>
    <style>
        .layui-badge-dot {
            margin-right: 5px;
        }
    </style>
</head>

<body class="pear-container">
    <div class="nav">
        <h5 class="nav-title">目录</h5>
        <ul>
            <li><a href="#mulu-1">基本信息录入</a></li>
            <li><a href="#mulu-2">举报人信息</a></li>
            <li><a href="#mulu-3">被举报人信息</a></li>
            <li><a href="#mulu-5">线索移送</a></li>
            <li><a href="#mulu-6">信息反馈</a></li>
            <li><a href="#mulu-4">查结情况</a></li>
        </ul>
    </div>

    <div class="layui-row layui-col-space10">
        <form class="layui-form" action="" lay-filter="example" id="formView">
            <script id="formHtml" type="text/html">
                <div class="layui-card">
                    <div class="layui-card-body" style="padding-bottom: 15px;">
                        <fieldset class="table-search-fieldset">
                            <legend class="legend-style">
                                <a name="mulu-1">基本信息录入</a>
                            </legend>
                            <div id="baseInfoDIV">
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><span class="layui-badge-dot"></span>受理编号</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="no" lay-verify="required" lay-reqtext="请输入正确的受理编号！" autocomplete="off" placeholder="请输入受理编号"
                                            class="layui-input" value="{{d.report.no}}">
                                    </div>
                    
                                    <label class="layui-form-label" style='width: auto;'><span class="layui-badge-dot"></span>一手来源单位</label>
                                    <div class="layui-input-inline">
                                        <select name="reportFrom" id="reportFrom" lay-verify="required"  lay-filter="reportFrom">
                                            {{# layui.each(d.options.reportFrom, function(index, item){ }}
                                                <option value={{item.value}}>{{item.label}}</option>
                                            {{# }); }}
                                        </select>
                                    </div>

                                    <div id='reportFromDIV'>
                                        <label class="layui-form-label"></span>线索来源</label>
                                        <div class="layui-input-inline">
                                            <select name="reportType" id="reportType" lay-search="">
                                                {{# layui.each(d.options.reportType, function(index, item){ }}
                                                    <option value={{item.value}}>{{item.label}}</option>
                                                {{# }); }}
                                            </select>
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label" style="width: auto;">来电来信线索编号</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="mailNo" autocomplete="off" placeholder="请输入致信来电编号" class="layui-input" value="{{d.report.mailNo}}">
                                    </div>
                    
                                    <label class="layui-form-label" style='width: auto;'>是否还要来信反映</label>
                                    <div class="layui-input-inline">
                                        <select name="moreLetter" id="moreLetter">
                                            <option value="0">否</option>
                                            <option value="1">是</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                    
                            <label class="layui-form-label">涉及区域</label>
                            <div class="area-button" style="margin: 20px 30px;">
                                <button data-type="areaAdd" type="button" class="layui-btn layui-btn-sm area-active">
                                    <i class="layui-icon">&#xe654;</i>
                                </button>
                                <button data-type="areaDelete" type="button" class="layui-btn layui-btn-danger layui-btn-sm area-active">
                                    <i class="layui-icon">&#xe67e;</i>
                                </button>
                            </div>
                    
                            <div id="addressDIV">
                                <!-- 动态插入地区选择器 -->
                            </div>

                            <label class="layui-form-label"><span class="layui-badge-dot"></span>涉案类别</label>
                            <div class="layui-input-inline">
                                <select name="reportCaseType" id="reportCaseType" lay-verify="required"  lay-filter="reportCaseType">
                                    {{# layui.each(d.options.reportCaseType, function(index, item){ }}
                                        <option value={{item.value}}>{{item.label}}</option>
                                    {{# }); }}
                                </select>
                            </div>
                        </fieldset>
                    </div>
                </div>
                
                <div class="layui-card">
                    <div class="layui-card-body" style="padding-bottom: 15px;">
                        <fieldset class="table-search-fieldset">
                            <legend class="legend-style">
                                <a name="mulu-2">举报人信息</a>
                            </legend>
                            <div id="reportPersonDIV">
                                <div class="layui-form-item">
                                    <label class="layui-form-label"><span class="layui-badge-dot"></span>姓名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="name" lay-verify="required" lay-reqtext="姓名是必填项，不能为空" placeholder="请输入姓名"
                                            autocomplete="off" class="layui-input" value="{{d.report.reporter.name}}">
                                    </div>
                    
                                    <label class="layui-form-label">身份证号</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="cardId" lay-verify="identity" lay-reqtext="身份证号是必填项，不能为空"
                                            placeholder="请输入身份证号" autocomplete="off" class="layui-input" value="{{d.report.reporter.cardId}}">
                                    </div>
                    
                                    <label class="layui-form-label">联系方式</label>
                                    <div class="layui-input-inline">
                                        <input type="tel" name="phone" lay-verify="phone" autocomplete="off" class="layui-input" value="{{d.report.reporter.phone}}">
                                    </div>
                                </div>
                    
                                <div class="layui-form-item">
                                    <label class="layui-form-label">住所地</label>
                                    <div class="layui-input-inline" style="width: 510px;">
                                        <input type="text" name="location" placeholder="请输入住所地" autocomplete="off" class="layui-input" value="{{d.report.reporter.location}}">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label layui-input-inline" style="padding-left: 56px;">备注</label>
                                    <div class="layui-input-block">
                                        <textarea placeholder="如含有多个举报人或其它情况可在此说明" class="layui-textarea" name='memo'
                                            style="width: 1000px;">{{d.report.reporter.memo}}</textarea>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
            
                <div class="layui-card">
                    <div class="layui-card-body" style="padding-bottom: 15px;">
                        <fieldset class="table-search-fieldset">
                            <legend class="legend-style">
                                <a name="mulu-3">被举报人信息</a>
                            </legend>
                            <div class="black-person-button">
                                <button data-type="tabAdd" type="button" class="layui-btn layui-btn-sm black-person-active">
                                    <i class="layui-icon">&#xe654;</i>
                                </button>
                                <button data-type="tabDelete" type="button"
                                    class="layui-btn layui-btn-danger layui-btn-sm black-person-active">
                                    <i class="layui-icon">&#xe67e;</i>
                                </button>
                            </div>
                    
                            <div id="blackInfoDIV">
                                <div class="layui-tab" lay-filter="black-person" style="margin: 15px 30px;">
                                    <ul class="layui-tab-title">
                                        <li class="layui-this" lay-id="black-1">被举报人1</li>
                                    </ul>
                                    <div class="layui-tab-content">
                                        <div class="layui-tab-item layui-show">
                                            <!-- 初始化渲染第一个被举报人 -->
                                            <div class="layui-form-item" id='black-1'>
                    
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="margin-right: 9px;">是否重复</label>
                                <div class="layui-input-inline">
                                    <select name="isRepeat" id="isRepeat" lay-filter="isRepeat">
                                        {{# layui.each(d.options.isRepeat, function(index, item){ }}
                                            <option value={{item.value}}>{{item.label}}</option>
                                        {{# }); }}
                                    </select>
                                </div>
                    
                                <div id="repeatReportNoDiv">
                                    <label class="layui-form-label" style="margin-right: 9px;">重复编号</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="repeatReportNo" id="repeatReportNo" autocomplete="off"
                                            placeholder="请输入重复的编号" class="layui-input" value="{{d.report.repeatReportNo}}">
                                    </div>
                                </div>
                            </div>
                            
                            <div class="layui-form-item layui-form-text">
                                <button type="button" lay-submit=""
                                lay-filter="seeQuestion" class="pear-btn pear-btn-primary pear-btn-md seeQuestion" style="margin-bottom: 10px;"> 
                                    <i class="icon pear-icon" title="放大查看">&#xe681;</i>
                                </button>
                                <label class="layui-form-label layui-input-inline" style="padding-left: 48px;">主要问题</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="请输入内容" lay-verify="required" class="layui-textarea" name='question'
                                        style="width: 1000px;">{{d.report.question}}</textarea>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>  
    
                <div class="layui-card">
                    <div class="layui-card-body" style="padding-bottom: 15px;">
                        <fieldset class="table-search-fieldset">
                            <legend class="legend-style">
                                <a name="mulu-5">线索移送</a>
                            </legend>
                            <div class="layui-form-item">
                                <label class="layui-form-label">是否移送</label>
                                <div class="layui-input-inline">
                                    <select name="isSend" id="isSend" lay-filter="isSend">
                                        <option value="0">否</option>
                                        <option value="1">是</option>
                                    </select>
                                </div>
                            </div>
                    
                            <div id="sendDiv">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">移交时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="sendTime" id="sendTime" lay-verify="date" placeholder="例如:2021-01-01"
                                            autocomplete="off" class="layui-input" value='{{d.report.sendTime}}'>
                                    </div>
                                    <label class="layui-form-label">移送编号</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="sendToId" placeholder="请输入移送编号" autocomplete="off" class="layui-input" value='{{d.report.sendToId}}'>
                                    </div>
                                    <label class="layui-form-label">移送单位</label>
                                    <div class="layui-input-inline">
                                        <select name="sendDepartment" id="sendDepartment" lay-filter="sendDepartment">
                                            {{# layui.each(d.options.sendDepartment, function(index, item){ }}
                                                <option value={{item.value}}>{{item.label}}</option>
                                            {{# }); }}
                                        </select>
                                    </div>
                    
                                    <div id="sendDepartmentMemoDIV">
                                        <label class="layui-form-label">单位名称</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="sendDepartmentMemo" id="sendDepartmentMemo" autocomplete="off"
                                                placeholder="请输入具体的单位名称" class="layui-input" value="{{d.report.sendDepartmentMemo}}">
                                        </div>
                                    </div>
                    
                                    <label class="layui-form-label">反馈时限</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="feedbackTimeLimit" autocomplete="off" lay-verify="intCheck" placeholder="请输入反馈时限，例如：10"
                                            class="layui-input" value="{{d.report.feedbackTimeLimit}}">
                                    </div>

                                    <label class="layui-form-label">查结时限</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="doneTimeLimit" autocomplete="off" lay-verify="intCheck" placeholder="请输入查结时限，例如：30"
                                            class="layui-input" value="{{d.report.doneTimeLimit}}">
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>

                <div class="layui-card">
                    <div class="layui-card-body" style="padding-bottom: 15px;">
                        <fieldset class="table-search-fieldset">
                            <legend class="legend-style">
                                <a name="mulu-6">信息反馈</a>
                            </legend>
                            <div class="layui-form-item">
                                <label class="layui-form-label" style="color: orangered;">线索状态</label>
                                <div class="layui-input-inline">
                                    <select name="reportState" id="reportState" lay-filter="reportState" disabled>
                                        {{# layui.each(d.options.reportState, function(index, item){ }}
                                            <option value={{item.value}}>{{item.label}}</option>
                                        {{# }); }}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">核查进展</label>
                                <div class="layui-input-inline">
                                    <select name="progress" id="progress" lay-filter="progress">
                                        {{# layui.each(d.options.progress, function(index, item){ }}
                                            <option value={{item.value}}>{{item.label}}</option>
                                        {{# }); }}
                                    </select>
                                </div>

                                <label class="layui-form-label">反馈时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="feedbackTime" id="feedbackTime" lay-verify="date"
                                        placeholder="例如:2021-01-01" autocomplete="off" class="layui-input" value='{{d.report.feedbackTime}}'>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div id="feedbackInfoDIV">
                                    <label class="layui-form-label">核查等级</label>
                                    <div class="layui-input-inline">
                                        <select name="level" id="level" lay-search="">
                                            {{# layui.each(d.options.level, function(index, item){ }}
                                                <option value={{item.value}}>{{item.label}}</option>
                                            {{# }); }}
                                        </select>
                                    </div>
                    
                                    <label class="layui-form-label">核查结论</label>
                                    <div class="layui-inline">
                                        <div class="layui-input-inline">
                                            <select name="conclusion" id="conclusion" lay-search="">
                                                {{# layui.each(d.options.conclusion, function(index, item){ }}
                                                    <option value={{item.value}}>{{item.label}}</option>
                                                {{# }); }}
                                            </select>
                                        </div>
                    
                                        <label class="layui-form-label">四种形态</label>
                                        <div class="layui-input-inline">
                                            <select name="fourShapes" id="fourShapes" lay-search="">
                                                {{# layui.each(d.options.fourShapes, function(index, item){ }}
                                                    <option value={{item.value}}>{{item.label}}</option>
                                                {{# }); }}
                                            </select>
                                        </div>
                    
                                        <label class="layui-form-label">处理结果</label>
                                        <div class="layui-input-inline">
                                            <select name="processResult" id="processResult" lay-search="">
                                                {{# layui.each(d.options.processResult, function(index, item){ }}
                                                    <option value={{item.value}}>{{item.label}}</option>
                                                {{# }); }}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <button data-type="seeAttach" type="button" class="pear-btn pear-btn-warming pear-btn-md seeAttach"> 
                                    <i class="icon pear-icon" title="附件">&#xe6ab;</i>上传附件
                                </button>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label layui-input-inline" style="padding-left: 66px;">备注</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="请输入内容" class="layui-textarea" name='feedbackMemo' style="width: 1000px;">{{d.report.feedbackMemo}}</textarea>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>

                
                <div class="layui-card">
                    <div class="layui-card-body" style="padding-bottom: 15px;">
                        <fieldset class="table-search-fieldset">
                            <legend class="legend-style">
                                <a name="mulu-4">查结情况</a>
                            </legend>
                            <div id="toComplete">
                                <div class="layui-form-item">
                                    <label class="layui-form-label" style="width: auto;">是否为顽瘴痼疾</label>
                                    <div class="layui-input-inline">
                                        <select name="isIssueType" id="isIssueType" lay-filter="isIssueType">
                                            <option value="0">否</option>
                                            <option value="1">是</option>
                                        </select>
                                    </div>

                                    <div id="issueTypeDIV">
                                        <label class="layui-form-label" style="width: auto;">顽瘴痼疾类别</label>
                                        <div class="layui-input-inline" id="issueType">
                        
                                        </div>
                                    </div>

                                    <label class="layui-form-label">涉及单位</label>
                                    <div class="layui-input-inline" id="involvedUnit">
                    
                                    </div>
                    
                                    <label class="layui-form-label" style="width: auto;">是否主动说明情况</label>
                                    <div class="layui-input-inline">
                                        <select name="isVolunteered" id="isVolunteered">
                                            <option value="0">否</option>
                                            <option value="1">是</option>
                                        </select>
                                    </div>
                    
                                    <label class="layui-form-label" style="width: auto;">是否属于扫黑除恶</label>
                                    <div class="layui-input-inline">
                                        <select name="isSweepBlack" id="isSweepBlack">
                                            <option value="0">否</option>
                                            <option value="1">是</option>
                                        </select>
                                    </div>
                                </div>
                    
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label layui-input-inline" style="padding-left: 61px;">备注</label>
                                    <div class="layui-input-block">
                                        <textarea placeholder="请输入内容" class="layui-textarea" name='completeDataMemo'
                                            style="width: 1000px;">{{d.report.completeDataMemo}}</textarea>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </div>
                </div>
    
                <div id="btnView" style="text-align: center; margin: 25px;">
                    
                </div>
            </script>
        </form>
    </div>

    <!-- 动态按钮模板 -->
    <script id="btnHtml" type="text/html">
        {{#  if(d.type === 'tempsave'){ }}
        <button type="button" class="layui-btn layui-btn-lg layui-btn-radius" lay-submit=""
            lay-filter="tmpSaveInfo">暂存线索
        </button>
        <button type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" lay-submit=""
            lay-filter="addInfo">添加线索
        </button>
        {{#  } else { }}
        <button type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" lay-submit=""
        lay-filter="editInfo">修改线索
        </button>
        <button type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-warm" lay-submit=""
            lay-filter="sendBackInfo">退回线索
        </button>
        <button type="button" class="layui-btn layui-btn-lg layui-btn-radius layui-btn-danger" lay-submit=""
            lay-filter="doneInfo">查结线索
        </button>
        {{#  } }}
    </script>

    <!-- 动态增加Address模板 -->
    <script id="pcaHtml" type="text/html">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <select name="province-{{d}}" lay-filter="province-{{d}}" id="province-{{d}}">
                <option></option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="city-{{d}}" lay-filter="city-{{d}}" id="city-{{d}}">
                <option></option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="area-{{d}}" lay-filter="area-{{d}}" id="area-{{d}}">
                <option></option>
            </select>
        </div>
    </script>
    <!-- 动态增加被举报人模板 -->
    <script id="blackHtml" type="text/html">
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="layui-badge-dot"></span>姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="blackName-{{d.numberID}}" lay-verify="required"
                    lay-reqtext="姓名是必填项，不能为空" placeholder="请输入姓名" autocomplete="off"
                    class="layui-input" value="{{d.reporteder.name}}">
            </div>

            <label class="layui-form-label">身份证号</label>
            <div class="layui-input-inline">
                <input type="text" name="blackCardId-{{d.numberID}}" lay-verify="identity" lay-reqtext="请输入正确格式的身份证号"
                    placeholder="有则输入身份证信息" autocomplete="off" class="layui-input" value="{{d.reporteder.blackCardId}}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: auto;">身份及涉及内容</label>
            <div class="layui-input-inline">
                <input type="text" id="blackCascader-{{d.numberID}}" class="layui-input cascader-input" style="width: 400px;" readonly="readonly">
            </div>
        </div>
    </script>
    <script src="../../js/xm-select.js"></script>
    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>

    <script>
        var options = layui.data('options').data
        var reportInfo = layui.data('reportInfo').item
        // console.log("reportInfo: ", reportInfo)
        reportInfo = myUtils.nullTransStr(reportInfo)
        // console.log("reportInfo: ", reportInfo)
        var locationParams = myUtils.GetRequest()
        // console.log("edit页面接收参数: ", locationParams)

        layui.use(['form', 'layedit', 'laydate', 'laytpl', 'util', 'pca', 'Api', 'request', 'cascader', 'loading'], function () {
            var $ = layui.jquery,
                element = layui.element,
                form = layui.form,
                layer = layui.layer,
                layedit = layui.layedit,
                laytpl = layui.laytpl,
                laydate = layui.laydate,
                Api = layui.Api,
                util = layui.util,
                pca = layui.pca,
                loading = layui.loading,
                request = layui.request,
                cascader = layui.cascader;

            var active
            var blackSelected = {}
            /** 初始化全局变量和函数 **/
            var issueType, involvedUnit
            var tabBlackID = []
            var tabIDIndex = reportInfo.reporteders.length
            var pcaIDList = []
            var pcaIDIdex = reportInfo.involvedRegion.length
            loading.Load(1, '加载中');
            initForm(reportInfo)

            function initForm(data) {
                var getFormTpl = formHtml.innerHTML,
                    formView = document.getElementById('formView');
                laytpl(getFormTpl).render({
                    report: data,
                    options: options
                }, function (html) {
                    formView.innerHTML = html;

                    /** 初始化日期选择器 **/
                    initLaydate()

                    /** 下拉框初始赋值 **/
                    initSelect(data)

                    /** 复选框初始赋值 **/
                    initXmSelectData()

                    /** 初始化按钮类型 **/
                    loadBtnTpl()

                    /** 初始化地址选择器 **/
                    loadPcaTpl(pcaIDIdex, 'init')

                    /** 初始化被举报人 **/
                    loadBlackTpl(tabIDIndex, 'init')

                    /** 初始化监听地址和被举报人的新增和删除 **/
                    listenABChange()
                    loading.loadRemove(1000);
                });
            }

            function initSelect(data) {
                var selects = {
                    'reportType': data.reportType,
                    'reportFrom': data.reportFrom,
                    'reportState': data.reportState,
                    'moreLetter': data.moreLetter,
                    'isRepeat': data.isRepeat,
                    'isVolunteered': data.isVolunteered,
                    'isSweepBlack': data.isSweepBlack,
                    'isSend': data.isSend,
                    'sendDepartment': data.sendDepartment,
                    'progress': data.progress,
                    'level': data.level,
                    'conclusion': data.conclusion,
                    'fourShapes': data.fourShapes,
                    'processResult': data.processResult,
                    'reportCaseType': data.reportCaseType
                };
                var values = Object.values(selects);
                var keys = Object.getOwnPropertyNames(selects);
                // console.log("selects: ", selects)
                for (var index = 0; index < values.length; index++) {
                    $("#" + keys[index]).find("option[value=" + values[index] + "]").prop("selected", true); // code做判断
                    // if (values[index] != "") { // name做判断
                    //     $('#' + keys[index] + ' option').filter(function () { return $(this).text() == values[index]; }).attr("selected", true);
                    // }
                }
                /** 初始化需要隐藏的DIV **/
                initHide(data)
            }

            function listenABChange() {
                active = {
                    tabAdd: function () {
                        //新增一个Tab项
                        tabIDIndex = tabIDIndex + 1
                        var tabID = 'black-' + tabIDIndex
                        tabBlackID.push(tabID)
                        var html = '<div class="layui-form-item" id=' + tabID + '> </div>'
                        // console.log("tabIDIndex: ", tabIDIndex)
                        element.tabAdd('black-person', {
                            title: '被举报人' + tabIDIndex,
                            content: html,
                            id: tabID
                        })
                        // 传入Number和tabID渲染模板
                        // console.log("loadBlackTpl tabID:", tabID)
                        loadBlackTpl(tabIDIndex, 'add')
                    },
                    tabDelete: function (othis) {
                        //删除指定Tab项
                        if (tabIDIndex > 1) {
                            layer.confirm('确定删除？', {
                                btn: ['确定', '取消']
                            }, function (index, layero) {
                                layer.close(index)

                                element.tabDelete('black-person', tabBlackID.pop());
                                delete blackSelected['blackCascader-' + tabIDIndex]
                                tabIDIndex = tabIDIndex - 1
                            }, function (index) {
                                // 用户点击取消
                            });
                            return false;
                        }
                    },
                    areaAdd: function () {
                        pcaIDIdex = pcaIDIdex + 1
                        // console.log("areaAdd: ", pcaIDIdex)
                        var pcaID = 'pca-' + pcaIDIdex
                        pcaIDList.push(pcaID)
                        loadPcaTpl(pcaIDIdex, 'add')
                    },
                    areaDelete: function (othis) {
                        if (pcaIDList.length != 0) {
                            layer.confirm('确定删除？', {
                                btn: ['确定', '取消']
                            }, function (index, layero) {
                                layer.close(index)
                                $("#" + pcaIDList.pop()).remove();
                                pcaIDIdex = pcaIDIdex - 1
                            }, function (index) {
                                // 用户点击取消
                            });
                            return false;
                        }
                    },
                    seeAttach: function (othis) {
                        // 跳转至附件页面
                        attachPage()
                    },
                };

                $('.black-person-active').on('click', function () {
                    var othis = $(this), type = othis.data('type');
                    active[type] ? active[type].call(this, othis) : '';
                });
                $('.area-active').on('click', function () {
                    var othis = $(this), type = othis.data('type');
                    active[type] ? active[type].call(this, othis) : '';
                });
                $('.seeAttach').on('click', function () {
                    var othis = $(this), type = othis.data('type');
                    active[type] ? active[type].call(this, othis) : '';
                });
            }

            function loadBtnTpl() {
                /** 初始化按钮类型 **/
                var btnHtmlTpl = btnHtml.innerHTML,
                    btnViewDiv = document.getElementById('btnView');
                laytpl(btnHtmlTpl).render(locationParams, function (html) {
                    btnViewDiv.innerHTML = html;
                });
            }

            function loadPcaTpl(numberID, type) {
                var len = 1
                var address = new Array()
                address.push({
                    province: '福建',
                    city: '厦门',
                    area: '全部'
                })
                var IDList = [numberID]
                if (type == 'init') {
                    len = numberID
                    address = reportInfo.involvedRegion
                    IDList = []
                    for (let j = 1; j <= numberID; j++) {
                        IDList.push(j);
                    }
                }
                for (let i = 1; i <= len; i++) {
                    var body = document.getElementById("addressDIV");
                    var div = document.createElement("div");
                    var divID = "pca-" + IDList[i - 1];
                    if (i > 1) {
                        pcaIDList.push(divID)
                    }
                    div.id = divID
                    div.setAttribute('class', 'layui-form-item')
                    div.setAttribute('style', 'margin-top: 15px;')
                    body.appendChild(div);

                    var getTpl = pcaHtml.innerHTML,
                        view = document.getElementById(divID);
                    laytpl(getTpl).render(IDList[i - 1], function (html) {
                        view.innerHTML = html;
                    });
                    let province = address[i - 1].province
                    let city = address[i - 1].city
                    let area = address[i - 1].area

                    if (province == null || province == "") {
                        province = '全部'
                    } else if (city == null || city == "") {
                        city = '全部'
                    } else if (area == null || area == "") {
                        area = '全部'
                    }
                    pca.init('select[name=province-' + IDList[i - 1] + ']', 'select[name=city-' + IDList[i - 1] + ']', 'select[name=area-' + IDList[i - 1] + ']', province, city, area);
                }
            }

            function loadBlackTpl(numberID, type) {
                var len = 1
                var IDList = [numberID]
                var tabIDList = ['black-' + numberID]
                var reporteders = reportInfo.reporteders
                if (type == 'init') {
                    len = numberID
                    IDList = []
                    tabIDList = []
                    for (let j = 1; j <= numberID; j++) {
                        IDList.push(j);
                        tabIDList.push('black-' + j)
                    }
                }
                for (let i = 1; i <= len; i++) {
                    if (type == 'add') {
                        var getTpl = blackHtml.innerHTML,
                            view = document.getElementById(tabIDList[i - 1]);
                        laytpl(getTpl).render({
                            numberID: IDList[i - 1],
                            reporteder: { name: '', blackCardId: '' }
                        }, function (html) {
                            view.innerHTML = html;
                            getBlackSelect(IDList[i - 1], null)
                        });
                    } else {
                        if (i > 1) {
                            tabBlackID.push(tabIDList[i - 1])
                            var html = '<div class="layui-form-item" id=' + tabIDList[i - 1] + '> </div>'
                            element.tabAdd('black-person', {
                                title: '被举报人' + IDList[i - 1],
                                content: html,
                                id: tabIDList[i - 1]
                            })
                        }
                        var getTpl = blackHtml.innerHTML,
                            view = document.getElementById(tabIDList[i - 1]);
                        laytpl(getTpl).render({
                            numberID: IDList[i - 1],
                            reporteder: reporteders[i - 1]
                        }, function (html) {
                            view.innerHTML = html;
                            /** 初始化级联选择器 **/
                            getBlackSelect(IDList[i - 1], reporteders[i - 1])
                        });
                    }
                    form.render('select')
                }
                form.render()
            }

            function getBlackSelect(numberID, itemInfo) {
                let data = myUtils.getCascaderData(options)
                let selected = []
                if (itemInfo != null) {
                    selected = myUtils.getCascaderSelectedValue(itemInfo)
                    blackSelected['blackCascader-' + numberID] = selected
                }
                // console.log("初始化级联选择器的Value：", selected)
                cascader({
                    elem: "#blackCascader-" + numberID,
                    data: data,
                    triggerType: "click",
                    value: selected,
                    success: function (valData, labelData) {
                        if (valData.length < 5) {
                            let addLen = 5 - valData.length
                            for (let i = 0; i < addLen; i++) {
                                valData.push(-1)
                            }
                        }
                        blackSelected["blackCascader-" + numberID] = valData
                    }
                });
            }

            function initHide(data) {
                if (data.isRepeat == '0') {
                    $('#repeatReportNoDiv').hide()
                } else {
                    $('#repeatReportNoDiv').show()
                }
                if (data.isSend == '1') {
                    $('#sendDiv').show()
                } else {
                    $('#sendDiv').hide()
                }
                if (data.sendDepartment == '0') {
                    $('#sendDepartmentMemoDIV').show()
                } else {
                    $('#sendDepartmentMemoDIV').hide()
                }
                if (data.progress == '0') {
                    $('#feedbackInfoDIV').hide()
                } else {
                    $('#feedbackInfoDIV').show()
                }
                if (data.issueType.length > 0) {
                    // 是否为顽瘴痼疾做初始化
                    $("#isIssueType").find("option[value=1]").prop("selected", true);
                    $('#issueTypeDIV').show()
                } else {
                    $('#issueTypeDIV').hide()
                }
                // 级联 一手来源单位 与 线索来源
                if (data.reportFrom == '8') {
                    // 仅当选 【8 指导组】 时才可以选线索来源
                    $('#reportFromDIV').show()
                } else {
                    $('#reportFromDIV').hide()
                }
                /** 初始化监听选择 **/
                listenSelect()
            }

            function initLaydate() {
                //日期
                laydate.render({
                    elem: '#sendTime',
                    format: 'yyyy-MM-dd',
                    trigger: 'click'
                });
                laydate.render({
                    elem: '#feedbackTime',
                    format: 'yyyy-MM-dd',
                    trigger: 'click'
                });
            }

            //自定义验证规则
            form.verify({
                intCheck: [
                    /(^$)|^[1-9]\d*$/
                    , '天数必须大于0哦'
                ]
            });

            function listenSelect() {
                $("#repeatReportNo").blur(function (event) {
                    // $("input").css("background-color", "#D6D6FF");
                    // console.log("失去聚焦")
                    let repeatNo = $("#repeatReportNo").val()
                    repeatNo = $.trim(repeatNo)
                    if (repeatNo == '') {
                        return
                    }
                    let params = {
                        no: repeatNo
                    }
                    var success = function (res) {
                        if (res.errno == 0) {
                            // console.log("已有案件的信息：", res.data)
                        } else {
                            layer.alert('该重复编号不存在', { icon: 2 });
                        }
                    }
                    request.get(Api.getByNo, params, success)
                });

                form.on('select(isRepeat)', function (data) {
                    var input = document.getElementById("repeatReportNo");
                    if (data.value == "0") {
                        $('#repeatReportNoDiv').hide()
                    } else {
                        $('#repeatReportNoDiv').show()
                    }
                });

                form.on('select(isSend)', function (data) {
                    var processValue = $("#progress").find("option:selected").val()
                    // console.log("processValue: ", processValue)
                    if (data.value == "1") {
                        $('#sendDiv').show()
                        if (processValue == '0') {
                            $("#progress").find("option[value=1]").prop("selected", true);
                            $("#reportState").find("option[value=1]").prop("selected", true);
                            $('#feedbackInfoDIV').show()
                        }
                    } else {
                        $('#sendDiv').hide()
                        if (processValue != '0') {
                            $("#progress").find("option[value=0]").prop("selected", true);
                            $("#reportState").find("option[value=0]").prop("selected", true);
                            $('#feedbackInfoDIV').hide()
                        }
                    }
                    form.render('select')
                });

                form.on('select(reportState)', function (data) {
                    // console.log("移送状态: ", data.value)
                    if (data.value == "-1" || data.value == '0') { // 暂存 || 未移送
                        $("#isSend").find("option[value=0]").prop("selected", true);
                        $("#progress").find("option[value=0]").prop("selected", true);
                        $('#sendDiv').hide()
                        $('#feedbackInfoDIV').hide()
                    } else if (data.value == "3") {
                        $("#progress").find("option[value=2]").prop("selected", true);
                    } else {
                        $("#isSend").find("option[value=1]").prop("selected", true);
                        $("#progress").find("option[value=1]").prop("selected", true);
                        $('#sendDiv').show()
                        $('#feedbackInfoDIV').show()
                    }
                    form.render('select')
                });

                form.on('select(progress)', function (data) {
                    if (data.value == "1") { // 核查中
                        $('#feedbackInfoDIV').show()
                        $('#sendDiv').show()
                        $("#isSend").find("option[value=1]").prop("selected", true);
                        $("#reportState").find("option[value=1]").prop("selected", true);
                    } else {
                        if (data.value == "2") { // 查结
                            $('#feedbackInfoDIV').show()
                            $('#sendDiv').show()
                            $("#isSend").find("option[value=1]").prop("selected", true);
                            $("#reportState").find("option[value=3]").prop("selected", true);
                        } else {
                            $('#feedbackInfoDIV').hide()
                            $('#sendDiv').hide()
                            $("#isSend").find("option[value=0]").prop("selected", true);
                            $("#reportState").find("option[value=0]").prop("selected", true);
                        }
                    }
                    form.render('select')
                });


                form.on('select(sendDepartment)', function (data) {
                    var input = document.getElementById("sendDepartmentMemo");
                    if (data.value == "0") { // 其它外单位
                        $('#sendDepartmentMemoDIV').show()
                        // input.setAttribute('lay-verify', 'required')
                    } else {
                        $('#sendDepartmentMemoDIV').hide()
                        // input.setAttribute('lay-verify', '')
                    }
                });

                form.on('select(isIssueType)', function (data) {
                    if (data.value == "0") { // 否
                        $('#issueTypeDIV').hide()
                    } else {
                        $('#issueTypeDIV').show()
                    }
                });

                form.on('select(reportFrom)', function (data) {
                    // console.log('reportFrom val', data.value)
                    if (data.value == "8") {
                        // 选到 【8 指导组】 才有 线索来源
                        $('#reportFromDIV').show()
                    } else {
                        $('#reportFromDIV').hide()
                    }
                    form.render('select')
                });
            }

            function initXmSelectData() {
                var issueTypeData = myUtils.deleteUnselected(options.issueType)
                var involvedUnitData = myUtils.deleteUnselected(options.involvedUnit)

                var issueTypeList = []
                var involvedUnitList = []
                for (var i = 0; i < reportInfo.issueType.length; i++) {
                    issueTypeList.push(reportInfo.issueType[i])
                }
                for (var i = 0; i < reportInfo.involvedUnit.length; i++) {
                    involvedUnitList.push(reportInfo.involvedUnit[i])
                }
                for (var i = 0; i < involvedUnitData.length; i++) {
                    if (involvedUnitList.includes(involvedUnitData[i].value)) {
                        involvedUnitData[i]['selected'] = true
                    }
                }
                for (var i = 0; i < issueTypeData.length; i++) {
                    if (issueTypeList.includes(issueTypeData[i].value)) {
                        issueTypeData[i]['selected'] = true
                    }
                }

                issueType = xmSelect.render({
                    el: '#issueType',
                    prop: {
                        name: 'label',
                        value: 'value',
                    },
                    data: issueTypeData,
                    direction: 'up',
                    height: 'auto',
                    autoRow: true,
                })

                involvedUnit = xmSelect.render({
                    el: '#involvedUnit',
                    prop: {
                        name: 'label',
                        value: 'value',
                    },
                    data: involvedUnitData,
                    on: function (data) {
                        // arr: 当前多选已选中的数据
                        // var arr = data.arr;
                    },
                    direction: 'up',
                    height: 'auto',
                    autoRow: true,
                })
            }

            function attachPage() {
                var url = '../../view/nav/attachment.html?no=' + reportInfo.no + '&id=' + reportInfo.id + '&code=' + reportInfo.reportState
                layer.open({
                    type: 2,
                    closeBtn: 1,
                    title: '🕒 附件',
                    area: ['80%', '70%'],
                    content: encodeURI(url),
                    scrollbar: false,
                    maxmin: true,
                    shadeClose: true,
                    success: function () {

                    },
                    end: function () {
                        // table.reload('excel-table');
                    }
                });
            }

            //监听主要问题的弹窗
            form.on('submit(seeQuestion)', function (data) {
                let content = data.field.question
                content = content.replaceAll('\n', '</br>')
                layer.alert(content, {
                    skin: 'layui-layer-lan'
                    , closeBtn: 0
                    , anim: 2 //动画类型
                });
            })

            //监听新增
            form.on('submit(addInfo)', function (data) {
                // console.log('addInfo params:', JSON.stringify(data.field))
                var params = getTotalParams(data.field)

                if (params['reportState'] == '-1') {
                    layer.alert('当前【线索状态】为【暂存】，不能直接添加线索', { icon: 2 });
                    return false;
                }
                layer.confirm('您确定新增吗？', {
                    btn: ['确定', '取消']
                }, function (index, layero) {
                    var url = Api.report + '/' + reportInfo.id
                    var success = function (res) {
                        if (res.errno == 0) {
                            // console.log("addExcel res: ", res)
                            layer.alert('新增成功!', { icon: 1 }, function () {
                                location.reload();
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index); //关闭当前页
                            });
                        } else {
                            layer.alert(res.errmsg, { icon: 2 });
                        }
                    }
                    request.put(url, params, success)
                }, function (index) {
                    // 用户点击取消 
                });

                return false;
            });

            //监听暂存
            form.on('submit(tmpSaveInfo)', function (data) {
                // console.log('tmpSaveInfo params:', JSON.stringify(data.field))
                var params = getTotalParams(data.field)

                params['reportState'] = '-1' // 强制状态为暂存
                // console.log("reportState", params)
                layer.confirm('您确定暂存吗？', {
                    btn: ['确定', '取消']
                }, function (index, layero) {
                    var url = Api.report + '/' + reportInfo.id
                    var success = function (res) {
                        if (res.errno == 0) {
                            // console.log("addExcel res: ", res)
                            layer.alert('暂存成功!', { icon: 1 }, function () {
                                location.reload();
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index); //关闭当前页
                            });
                        } else {
                            layer.alert(res.errmsg, { icon: 2 });
                        }
                    }
                    request.put(url, params, success)
                }, function (index) {
                    // 用户点击取消 
                });

                return false;
            });

            //监听修改
            form.on('submit(editInfo)', function (data) {
                // console.log('editInfo params:', JSON.stringify(data.field))
                var params = getTotalParams(data.field)

                if (params['progress'] == '2') {
                    // 如果进展为已查结，则状态为已完成
                    params['reportState'] = '3'
                }
                layer.confirm('您确定修改吗？', {
                    btn: ['确定', '取消']
                }, function (index, layero) {
                    var url = Api.report + '/' + reportInfo.id
                    var success = function (res) {
                        if (res.errno == 0) {
                            // console.log("updateExcel res: ", res)
                            layer.msg("修改成功", {
                                icon: 6
                            });
                            setTimeout(() => {
                                // parent.location.reload()
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index); //关闭当前页
                            }, 1500);
                        } else {
                            layer.alert(res.errmsg, { icon: 2 });
                        }
                    }
                    request.put(url, params, success)
                }, function (index) {
                    // 用户点击取消 
                });

                return false;
            });

            //监听退回
            form.on('submit(sendBackInfo)', function (data) {
                // console.log('editInfo params:', JSON.stringify(data.field))

                var params = getTotalParams(data.field)

                if (params['reportState'] == '0') {
                    layer.alert('该线索未移送，无法退回', { icon: 2 });
                    return false
                } else if (params['reportState'] == '-1') {
                    layer.alert('该线索为暂存，无法退回', { icon: 2 });
                    return false
                }
                else if (params['reportState'] == '1') {
                    layer.alert('该线索未反馈，无法退回', { icon: 2 });
                    return false
                }
                else if (params['reportState'] == '3') {
                    layer.alert('该线索已完成，无法退回', { icon: 2 });
                    return false
                }
                params['reportState'] = '4' // 强制状态为退回
                layer.confirm('您确定退回吗？', {
                    btn: ['确定', '取消']
                }, function (index, layero) {
                    var url = Api.report + '/' + reportInfo.id
                    var success = function (res) {
                        if (res.errno == 0) {
                            // console.log("updateExcel res: ", res)
                            layer.msg("退回成功", {
                                icon: 6
                            });
                            setTimeout(() => {
                                // parent.location.reload()
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index); //关闭当前页
                            }, 1500);
                        } else {
                            layer.alert(res.errmsg, { icon: 2 });
                        }
                    }
                    request.put(url, params, success)
                }, function (index) {
                    // 用户点击取消 
                });

                return false;
            });

            //监听查结
            form.on('submit(doneInfo)', function (data) {
                // console.log('editInfo params:', JSON.stringify(data.field))

                var params = getTotalParams(data.field)

                if (params['reportState'] != '5') {
                    layer.alert('该条线索未申请查结', { icon: 2 });
                    return false;
                }
                params['reportState'] = '3' // 强制状态为已完成
                params['progress'] = '2' // 强制进展为已查结
                layer.confirm('您确定查结吗？', {
                    btn: ['确定', '取消']
                }, function (index, layero) {
                    var url = Api.report + '/' + reportInfo.id
                    var success = function (res) {
                        if (res.errno == 0) {
                            // console.log("updateExcel res: ", res)
                            layer.msg("查结成功", {
                                icon: 6
                            });
                            setTimeout(() => {
                                // parent.location.reload()
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index); //关闭当前页
                            }, 1500);
                        } else {
                            layer.alert(res.errmsg, { icon: 2 });
                        }
                    }
                    request.put(url, params, success)
                }, function (index) {
                    // 用户点击取消 
                });

                return false;
            });

            function getTotalParams(params) {
                // 封装地址和被举报人信息
                params = myUtils.pieceAddress(params, pcaIDIdex)
                params = myUtils.pieceBlackInfo(params, blackSelected)
                params = myUtils.pieceReporter(params)
                // 获取xm-select组件的值（复选）
                params['issueType'] = myUtils.cleanXmSelect(issueType.getValue())
                params['involvedUnit'] = myUtils.cleanXmSelect(involvedUnit.getValue())
                // 获取录入人姓名
                let userInfoData = layui.data('userInfo').item
                params['enterer'] = userInfoData.name
                // params = myUtils.setNull(params)
                // console.log("getTotalParams: ", params)
                return params
            }
        });
    </script>
</body>

</html>